﻿<%@ taglib uri="/mytaglib" prefix="ct"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ include file="/includes.jsp"%>

<script>
	$(document).ready(function() {
		$(":checkbox,button").click(function(event){
			event.stopPropagation();//阻止冒泡事件，上级的单击事件不会被调用
			}); 
		$(":checkbox").parent().click(function(event){
			event.stopPropagation();//阻止冒泡事件，上级的单击事件不会被调用
			}); 
	});
	
	function changeCheck(roleId){
		$("#"+roleId).click();
	}
	
	function showRoleDetail(id){
		myAjaxSumbmit('', '/role/ajax/entity?roleId=' + id, '', function(
				data) {

			document.getElementById("editRoleForm").reset();
			myValidate.resetForm();
			$('#roleId').val(id);
			$('#roleName').val(data.roleName);
			$('#roleCode').val(data.roleCode);
			$('#des').val(data.des);			

			$("#editRoleModalLabel").text("查看");
			$("#editSaveBtn").hide();
			$('#editRoleModal').removeClass("modal-warning");
			$('#editRoleModal').addClass("modal-info");
			$(".has-error").removeClass('has-error');
			
			$('#editRoleModal').modal('show');

		});
	}
	
	function toggleAll(){
		$(":checkbox").prop("checked",$("#allClickTag").is(':checked'));
	}
	
	var form = $("#editRoleForm");
	var myValidate = form
	.validate({
		showErrors : function(errorMap, errorList) {
			for (var i = 0; i < errorList.length; i++) {
				$(errorList[i].element).parent().parent().addClass(
						'has-error');
			}
			this.defaultShowErrors();
		},
		success : function(label, element) {
			$(element).parent().parent().removeClass('has-error');
		}
	});
	
	function toRoleAdd(){

		document.getElementById("editRoleForm").reset();
		myValidate.resetForm();
		$(".has-error").removeClass('has-error');

		$("#editRoleModalLabel").text("新增");
		$("#editSaveBtn").show();
		$("#editSaveBtn").attr("onclick", "saveRoleAdd()");
		$('#editRoleModal').removeClass("modal-warning");
		$('#editRoleModal').removeClass("modal-info");
		
		$('#editRoleModal').modal('show');
	}	
	
	function saveRoleAdd(){

		if (form.valid()) {
			myAjaxSumbmit('editRoleForm',
					'/role/ajax/save',
					'/role/list', function() {
						$('#editRoleModal').modal('hide');
					});
		}
	}
	
	function toRoleModify(id){
		myAjaxSumbmit('', '/role/ajax/entity?roleId=' + id, '', function(
				data) {

			document.getElementById("editRoleForm").reset();
			myValidate.resetForm();
			$('#roleId').val(id);
			$('#roleName').val(data.roleName);
			$('#roleCode').val(data.roleCode);
			$('#des').val(data.des);			

			$("#editRoleModalLabel").text("修改");
			$('#editRoleModal').addClass("modal-warning");
			$('#editRoleModal').removeClass("modal-info");
			$("#editSaveBtn").attr("onclick", "modifyRole(" + id + ")");
			$("#editSaveBtn").show();
			$(".has-error").removeClass('has-error');
			$('#editRoleModal').modal('show');

		});
	}
	
	function modifyRole(id) {
		if (!(id === undefined) && id != '') {
			if (form.valid()) {
				myAjaxSumbmit('editRoleForm',
						'/role/ajax/update',
						'/role/list', function() {
							$('#editRoleModal').modal('hide');
						});
			}
		} else {
			alert("请选择修改项！");
		}
	}
	
	function delRoleConfirm(id) {
		$("#delConfirmContent").html("确认删除这个角色？");
		$("#delConfirmButton").attr("onclick", "delRole(" + id + ")");
		$('#delModal').modal('show');
	}
	
	function delRole(id) {
		if (!(id === undefined) && id != '') {
			myAjaxSumbmit('noData',
					'/role/ajax/del?roleId=' + id, '/role/list',
					function() {
						//$("#role" + id).remove();
						$('#delModal').modal('hide');

					});
		} else {
			alert("请选择删除项！");
		}
	}
	
	function delRoles() {
			myAjaxSumbmit('roleListForm',
					'/role/ajax/delAll', '/role/list',
					function() {
						$('#delModal').modal('hide');
					});
	}
	
	function delAllRoleConfirm(){
		var len=$(":checkbox[name=roleIds]:checked").length;
		if(len>0){
			$("#delConfirmContent").html("确认删除这些角色？");
			$("#delConfirmButton").attr("onclick", "delRoles()");
			$('#delModal').modal('show');
		}else{
			alert("请选择删除项！");
		}
	}
	
	function configPermission(roleId){
		mySubmit("","/role/ajax/toConfigPermisson?roleId="+roleId);
	}
	
	function searchRole(){
		mySubmit('searchRoleForm', '/role/list');
	}
	
	function configUser(roleId) {
		myAjaxSumbmit('',
				'/role/ajax/users?roleId='+roleId,
				'', function(data) {		
			var selectData=new Array();
			var selectedUsers=new Array();
			for(var i=0;i<data.length;i++){
				selectData[i]={ id: data[i].userId, text: "用户名："+data[i].userName+" 账号:"+data[i].loginId };
				if(data[i].selected){
					selectedUsers.push(data[i].userId);
				}
			}
			$("#selectedUsers").select2({
				language : "zh-CN",
				 data: selectData
			});
			$('#selectRoleId').val(roleId);
			
			$("#selectedUsers").val(selectedUsers).trigger("change");
			$('#configUserModal').modal('show');		
		});
	}
	
	function saveRoleUsers() {
		myAjaxSumbmit('configUserForm',
				'/role/ajax/saveRoleUsers',
				'', function(data) {			
			$('#configUserModal').modal('hide');		
		});
	}
</script>



<div class="box-header">
	<form id="searchRoleForm">
		<div class="col-sm-2">
			<h3 class="box-title">角色管理列表</h3>
		</div>
		<div class="col-sm-2">
			<input type="text" name="roleName"
				class="form-control input-sm pull-right" placeholder="角色名称"
				value="${roleSearchPagingVo.roleName }">
		</div>
		<div class="col-sm-2">
			<input type="text" name="roleCode"
				class="form-control input-sm pull-right" placeholder="角色编码"
				value="${roleSearchPagingVo.roleCode }">
		</div>
		<div class="col-sm-2">
			<div class="input-group">
				<input type="text" name="des"
					class="form-control input-sm pull-right" placeholder="角色描述"
					value="${roleSearchPagingVo.des }">
				<div class="input-group-btn">
					<button type="button" class="btn btn-sm btn-default" type="button"
						onclick="searchRole()">
						<i class="fa fa-search"></i>
					</button>
				</div>
			</div>
		</div>
	</form>
	<div class="box-tools">
		<button type="button" onclick="delAllRoleConfirm()" class="btn btn-danger btn-flat">批量删除</button>
		<button type="button" onclick="toRoleAdd()" class="btn btn-primary btn-flat">新增</button>
	</div>


</div>
<!-- /.box-header -->
<div class="box-body table-responsive no-padding">

	<form id="roleListForm">
		<table class="table table-hover  table-bordered">
			<tbody>
				<tr>
					<th width="5%" onclick="changeCheck('allClickTag')">全选<input
						type="checkbox" onchange="toggleAll()" id="allClickTag"></th>
					<th width="15%">角色名称</th>
					<th width="10%">角色编码</th>
					<th width="40%">角色描述</th>
					<th width="30%">操作</th>
				</tr>
			</tbody>

			<c:forEach var="role" items="${page.list}">

				<tr onclick="showRoleDetail(${role.roleId})" title="单击查看详情"
					id="role${role.roleId}">
					<td align="center" onclick="changeCheck('roleId${role.roleId}')"><input
						type="checkbox" id="roleId${role.roleId}" name="roleIds"
						title="选择" value="${role.roleId}"></td>
					<td>${role.roleName}</td>
					<td>${role.roleCode}</td>
					<td>${role.des}</td>
					<td>
						<div class="col-sm-3" align="center">
							<button type="button" onclick="toRoleModify('${role.roleId}')"
								class="btn btn-warning btn-flat btn-shorter">修改</button>
						</div>
						<div class="col-sm-3" align="center">
							<button type="button" onclick="delRoleConfirm('${role.roleId}')"
								class="btn btn-danger btn-flat btn-shorter">删除</button>
						</div>
						<div class="col-sm-3" align="center">
							<button type="button" onclick="configPermission('${role.roleId}')"
								class="btn btn-warning btn-flat btn-shorter">分配权限</button>
						</div>
						<div class="col-sm-3" align="center">
							<button type="button" onclick="configUser('${role.roleId}')"
								class="btn btn-warning btn-flat btn-shorter">分配用户</button>
						</div>
					</td>
				</tr>

			</c:forEach>

		</table>
	</form>

</div>
<!-- /.box-body -->

<div class="box-footer clearfix">
	<ct:paging pageNo="${page.pageNo}" recordCount="${page.recordCount}"
		pageSize="${page.pageSize}" url="/role/list" />
</div>


<!-- Modal -->
<div class="modal fade " id="editRoleModal" role="dialog"
	aria-labelledby="editRoleModalLabel" data-backdrop="false">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-label="Close" onclick="closeModal('editRoleModal')">
					<span aria-hidden="true">&times;</span>
				</button>
				<h4 class="modal-title" id="editRoleModalLabel">新增</h4>
			</div>
			<div class="modal-body" id="editRoleModalBody">
				<form class="form-horizontal" id="editRoleForm">
					<input type="hidden" id="roleId" name="roleId">
					<div class="box-body">
						<div class="form-group ">
							<label for="roleName" class="col-sm-2 control-label">角色名称</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="roleName"
									name="roleName" placeholder="角色名称" required="required">
							</div>
						</div>


						<div class="form-group" id="urlDiv">
							<label for="roleCode" class="col-sm-2 control-label">角色编码</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="roleCode"
									name="roleCode" placeholder="角色编码">
							</div>
						</div>


						<div class="form-group">
							<label for="des" class="col-sm-2 control-label">描述</label>
							<div class="col-sm-10">
								<textarea class="form-control" rows="3" id="des" name="des"
									placeholder="描述..."></textarea>
							</div>
						</div>

					</div>
					<!-- /.box-body -->
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default " data-dismiss="modal"
					onclick="closeModal('editRoleModal')">关闭</button>
				<button type="button" class="btn btn-primary"
					onclick="saveRoleAdd()" id="editSaveBtn">保存</button>
			</div>

		</div>
	</div>
</div>

<div class="modal fade " id="configUserModal" role="dialog"
	aria-labelledby="configUserModal" data-backdrop="false">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-label="Close" onclick="closeModal('configUserModal')">
					<span aria-hidden="true">&times;</span>
				</button>
				<h4 class="modal-title" id="configUserModalLabel">分配用户</h4>
			</div>
			<div class="modal-body" id="configUserModalBody">
				<form class="form-horizontal" id="configUserForm">
					<input type="hidden" id="selectRoleId" name="selectRoleId">
					<div class="box-body">
						<div class="form-group ">
							<label for="selectedUsers" class="col-sm-2 control-label">用户选择</label>
							<div class="col-sm-10">
								<select class="form-control select2" style="width: 100%;"
									id="selectedUsers" name="selectedUsers"  multiple="multiple">
								</select>
							</div>
						</div>
					</div>
					<!-- /.box-body -->
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default " data-dismiss="modal"
					onclick="closeModal('configUserModal')">关闭</button>
				<button type="button" class="btn btn-primary"
					onclick="saveRoleUsers()" id="editSaveBtn">保存</button>
			</div>

		</div>
	</div>
</div>



